import React, {Component} from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  StyleSheet,
  ActivityIndicator,
  Image,
  ListView,
  FlatList, TextInput
} from 'react-native'
import {Actions} from "react-native-router-flux";
import {ListRow} from 'teaset'
import * as String from './../../utils/srting'
import Toast2, {
  DURATION
} from 'react-native-easy-toast'
import { SafeAreaView } from 'react-navigation';

class UserChatsScene extends Component{
  constructor(props){
    super(props)
    this.state = {
      dataSource: [],
      jifen: ''
    }
  }

  componentDidMount() {
    this.props.actions.userChats()
  }

  componentWillReceiveProps(nextProps) {
    const {
      userChats,
    } = nextProps;

    if(this.props.userChats !== userChats){
      if (userChats.error !== false) {
        if (userChats.error.status === 401) {
          Actions.login()
          return;
        }
        this.toast.show(userChats.error.message)
      }else{
        if(userChats.data && userChats.data.length > 0){
          this._setRows(userChats.data);
          this.setState({
            dataSource: this._getRows(),
            jifen: userChats.meta.jifen
          });
        }
      }
    }
  }


  _setRows(rows) {
    this._rows = rows;
  }
  _getRows() {
    return this._rows ? this._rows : [];
  }


  renderRow(userChats){
    let userChat = userChats.item
    return(
      <ListRow
        detail= {userChat.msg}
        title= {String.formatTime(userChat.created_at)}
        topSeparator = 'full'
        bottomSeparator = 'full'
        detailMultiLine={true}
        titlePlace='top'
        // detailStyle={{flexDirection: ;}}
      />
    )
  }


  ListEmptyComponent(){
    return(
      <View style={{height:300, justifyContent:'center', alignItems:'center'}}>
        <Text>没有记录哦~</Text>
      </View>
    )
  }


  ListHeaderComponent(){
    return(
      <View style={styles.title}>
        <Text style={{color:'#E12F32',fontSize:23, marginBottom: 10}}>积分记录</Text>
        <Text style={{color:'#999',fontSize:14, marginBottom: 15}}>(显示最近50条记录)</Text>
        <Text style={{color:'#f00'}}>合计：{this.state.jifen}分</Text>
      </View>
    )
  }

  render(){
    return(
      <SafeAreaView style={styles.container}>

        <FlatList
          ref={(view) => { this.myFlatList = view; }}
          data={this.state.dataSource}
          renderItem={this.renderRow.bind(this)}
          nestedScrollEnabled={true}
          ListHeaderComponent={this.ListHeaderComponent()}
          ListEmptyComponent={this.ListEmptyComponent.bind(this)}
        />
        <Toast2
          ref={view => this.toast = view}
          style={{backgroundColor:'red'}}
          opacity={0.6}
          position='top'/>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#fff'
  },
  title:{
    // height:40,
    flexDirection:'column',
    marginLeft:10,
    marginBottom:10,
    // alignItems:'center',
    justifyContent: 'center',
    marginTop: 15,
    fontWeight:'bold'
  }
})


export const LayoutComponent = UserChatsScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    userChats: state.userChatsReducer
  }
}